<template>
  <div class="app-container">
    <div class="bg-blue-100">
      <div class="px-24 py-16 text-white flex justify-between aling-center items-center">
        <div class="w-40 flex justify-start">
          <router-link to="/sale/walmart/walmartWFS/shipments"><i
              class="el-icon-back larger-icon"></i></router-link>
        </div>
        <p class="Body-module_body__eiCkB Body-module_body1__B5yP7 Body-module_weight400__4Oy12 text-white"
          data-testid="page-title">
          <span class="w_DY w_Da w_De text-white">
            <font style="vertical-align: inherit">
              <font style="vertical-align: inherit">Set up shipment</font>
            </font>
          </span>
        </p>
        <div class="w-40 flex justify-end">
          <i class="el-icon-close larger-icon" @click="iconClose"></i>
        </div>
      </div>
    </div>
    <div class="steps-container">
      <el-steps :active="active" finish-status="success" style="width: 400px;">
        <el-step title="Item"></el-step>
        <el-step title="Estimate"></el-step>
        <el-step title="Confirm"></el-step>
      </el-steps>
    </div>
    <!--Item-->
    <div v-if="active === 0" style="background-color:#f9f9f9;">
      <div class="item-details-title">
        <h2>Item details</h2>
        <p>Review your items for this shipment.</p>
      </div>
      <div class="shipment-container">
        <div class="shipment-header">
          <span class="shipment-id"><strong>Shipment ID:</strong> {{ shipmentData.shipmentId }}</span>
          <div class="shipment-details">
            <div class="statistic">
              <span class="total-items">Total items</span>
              <strong class="total-items-value">{{ this.totalItems }}</strong>
            </div>
            <div class="statistic">
              <span class="no-master-cases">No. of master cases</span>
              <strong class="no-master-cases-value">{{ this.totalMasterCases }}</strong>
            </div>
          </div>
        </div>

        <div>
          <el-table :data="shipmentItemList" :max-height="240">
            <el-table-column label="Item name" width="400px">
              <template slot-scope="scope">
                <span>{{ scope.row.itemDesc.slice(0, 39)
                  }}<span v-if="scope.row.itemDesc.length > 39">...</span></span>
                <br />
                <span>GTIN：{{ scope.row.gtin }}</span>
              </template>
            </el-table-column>
            <el-table-column label="SKU" prop="sku"></el-table-column>
            <el-table-column label="Total units" prop="itemQty">
              <template slot-scope="scope">
                <span style="font-size: 18px;">{{ scope.row.itemQty }}</span>
                <el-button ref="editButton" @click="openDialog(scope.row)" type="text" icon="el-icon-edit"
                  style="font-size: 16px;margin-left:2%"></el-button>
              </template>
            </el-table-column>
            <el-table-column label="Master case setup">
              <template slot-scope="scope">
                <span>{{ scope.row.innerPackQty === 1 ? '个人' : '盒装' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="Units per master case" prop="innerPackQty"></el-table-column>
            <el-table-column label="Action">
              <template slot-scope="scope">
                <!-- 使用 @click 事件绑定方式传递 scope.row -->
                <el-button type="text" icon="el-icon-printer" size="large" style="font-size: 18px;"
                  @click="handleInventoryPrint(scope.row)">
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <!--Estimate-->
    <div v-if="active === 1" class="Estimate-price" style="background-color:#f9f9f9; border-radius: 8px;">
      <div class="item-details-title">
        <h2>Estimate price</h2>
        <p>Select a carrier, freight type, and packaging details</p>
      </div>
      <div class="container" style="display: flex; justify-content: space-between; overflow-y: auto;">
        <div class="left-column" :style="{ borderRadius: '8px', width: '25%', marginRight: '20px' }">
          <div :style="{ height: containerHeight }" class="ship-de">
            <div class="shipment-id">
              <span class="shipment-id"><strong>Shipment ID</strong> <br>{{ shipmentData.shipmentId }}</span>
            </div>
            <div class="underline-"></div>
            <div class="carrier-options underline- margin-bottom">
              <label class="shipment-id" for="carrier"><strong>Carrier options</strong></label>
              <span style="font-size:14px;line-height: 1.5;" class="gray-text">Choose the Walmart Preferred Carrier
                Program
                for reduced
                shipping
                rates, or use your own carrier.</span>
              <select id="carrier" v-model="carrier" @change="updateContainerHeight">
                <option value="preferred">Walmart preferred carrier</option>
                <option value="own">I'll find a carrier or use my vehicles</option>
              </select>
            </div>
            <div class="underline-"></div>
            <div class="freight-type">
              <label for="freight-type">Freight Type
                <span class="StatefullPopover-module_popoverContainer__jjevh">
                  <el-tooltip
                    content="对于重量小于150磅的箱子，选择“小包裹”；对于重量不超过22,000磅的托盘，选择“零担运输”（LTL）；对于重量不超过45,000磅的托盘，选择“整车运输”（FTL）。"
                    effect="dark" placement="top">
                    <svg-icon icon-class="question"></svg-icon>
                  </el-tooltip>
                </span>
              </label>
              <div v-if="carrier === 'preferred'">
                <div class="divTop">
                  <input type="radio" id="small-parcel" name="freight-type" value="small-parcel" class="radio-btn"
                    checked v-model="selectedPreferred">
                  <label for="small-parcel" class="radio-label" style="display: inline; vertical-align: middle;">Small
                    parcel</label>
                </div>
                <div class="divTop">
                  <input type="radio" id="ltl" name="freight-type" value="ltl" class="radio-btn"
                    v-model="selectedPreferred">
                  <label for="ltl" class="radio-label" style=" display: inline; vertical-align: middle;">LTL (Less than
                    truckload)</label>
                </div>
              </div>

              <!-- Additional Freight Options for 'own' carrier -->
              <div v-if="carrier === 'own'">
                <div class="divTop">
                  <input type="radio" id="small-parcel" name="freight-type" value="small-parcel" class="radio-btn"
                    checked v-model="selectedPreferred">
                  <label for="small-parcel" class="radio-label" style=" display: inline; vertical-align: middle;">Small
                    parcel</label>
                </div>
                <div class="divTop">
                  <input type="radio" id="ltl" name="freight-type" value="ltl" class="radio-btn"
                    v-model="selectedPreferred">
                  <label for="ltl" class="radio-label" style=" display: inline; vertical-align: middle;">LTL (Less than
                    truckload)</label>
                </div>
                <div class="divTop">
                  <input type="radio" id="ftl" name="freight-type" value="ftl" class="radio-btn"
                    v-model="selectedPreferred">
                  <label for="ftl" class="radio-label" style=" display: inline; vertical-align: middle;">FTL (Full
                    truckload)</label>
                </div>
                <div class="divTop">
                  <input type="radio" id="lcl" name="freight-type" value="lcl" class="radio-btn"
                    v-model="selectedPreferred">
                  <label for="lcl" class="radio-label" style=" display: inline; vertical-align: middle;">LCL (Less than
                    container load)</label>
                </div>
                <div class="divTop">
                  <input type="radio" id="fcl" name="freight-type" value="fcl" class="radio-btn"
                    v-model="selectedPreferred">
                  <label for="fcl" class="radio-label" style=" display: inline; vertical-align: middle;">FCL (Full
                    container
                    load)</label>
                </div>
              </div>
            </div>
          </div>
          <div v-if="carrier === 'preferred'" class="ship-from gray-text"
            style="background-color: white;  border-radius: 8px;">
            <span><Strong>Ship from
                <span class="StatefullPopover-module_popoverContainer__jjevh">
                  <el-tooltip content="我们将把无法送达的货物退回至此地址。" effect="dark" placement="top">
                    <svg-icon icon-class="question"></svg-icon>
                  </el-tooltip>
                </span>
              </Strong>
            </span>
            <p>SHANGJUN ZOU</p>
            <p>(626) 727-6061</p>
            <p>15601 CYPRESS AVE, IRWINDALE, CA, 91706-2120</p>
          </div>

          <!-- Ship to Section -->
          <div class="ship-to gray-text" style="background-color:white;  border-radius: 8px;">
            <span><Strong>Ship to</Strong></span>
            <p>{{ this.shipmentData.shipFcName }}, {{ this.shipmentData.shipAddressLine }},
              {{ this.shipmentData.shipCity }}, {{ this.shipmentData.shipStateCode }}, {{
                this.shipmentData.shipPostalCode
              }}
            </p>
          </div>
        </div>

        <!-- Right Column: Master case details -->
        <div class="right-column" :style="{ borderRadius: '8px', width: '70%', marginRight: '20px' }" pointer-events:
          none>
          <div class="master-case-details" v-if="selectedPreferred === 'small-parcel' && carrier === 'preferred'">
            <div class="md-strong-span">
              <span><strong>Master case details</strong> </span>
            </div>
            <div class="md-span gray-text">
              <span>Shipment ID:{{ shipmentData.shipmentId }} | Total items: {{ this.totalItems }} | Total units: {{
                this.totalUnits }}</span>
            </div>
            <div class="underline-"></div>
            <div class="md-span">
              <span>Master case type 1</span>
            </div>
            <div class="md-label-input">
              <div class="input-row">
                <label for="length">Length (inches)*</label>
                <input type="number" id="length" required>
              </div>
              <div class="input-row">
                <label for="width">Width (inches)*</label>
                <input type="number" id="width" required>
              </div>
              <div class="input-row">
                <label for="height">Height (inches)*</label>
                <input type="number" id="height" required>
              </div>
              <div class="input-row">
                <label for="weight">Weight per master case (lb)*</label>
                <input type="number" id="weight" required>
              </div>
              <div class="input-row">
                <label for="num-cases">No. of master cases*</label>
                <input type="number" id="num-cases" required>
              </div>
              <div class="input-row">
                <label for="sku">Single or mixed SKU*</label>
                <select id="sku" required>
                  <option value="">Select</option>
                  <option value="single">Single</option>
                  <option value="mixed">Mixed</option>
                </select>
              </div>
            </div>
          </div>
          <div class="master-case-details" v-if="selectedPreferred === 'ltl' && carrier === 'preferred'">
            <div class="md-span">
              <span>Preferred pickup date*</span>
            </div>
            <div class="w_EN">
              <el-date-picker v-model="expectedDeliveryDate" type="date" placeholder="yyyy-mm-dd" class="w_ER"
                :picker-options="pickerOptions">
              </el-date-picker>
            </div>
            <div class="underline-"></div>
            <div class="md-span">
              <span><strong>Pallet details</strong>&nbsp;&nbsp;
                <span class="StatefullPopover-module_popoverContainer__jjevh">
                  <el-tooltip content="首选承运商仅接受 48” x 40” 托盘。请参阅沃尔玛首选承运商计划，了解所有要求。" effect="dark" placement="top">
                    <svg-icon icon-class="question"></svg-icon>
                  </el-tooltip>
                </span>
              </span>
            </div>
            <div class="md-span gray-text">
              <span>Shipment ID:{{ shipmentData.shipmentId }} | Total items: {{ this.totalItems }} | Total units: {{
                this.totalUnits }}</span>
            </div>
            <div class="md-label-input">
              <div class="input-roww">
                <label for="ltl-length">No. of single SKU master cases*</label>
                <input type="number" id="ltl-length" required>
              </div>
              <div class="input-roww">
                <label for="ltl-width">No. of mixed SKU master cases*</label>
                <input type="number" id="ltl-width" required>
              </div>
              <div class="input-roww">
                <label for="ltl-height">Freight class*
                  <span class="StatefullPopover-module_popoverContainer__jjevh">
                    <el-tooltip content="NMFTA 定义的标准决定了计费重量。每件物品都有基于其密度、责任、处理和适合拖车的能力的货运等级（或 NMFC 代码）。" effect="dark"
                      placement="top">
                      <svg-icon icon-class="question"></svg-icon>
                    </el-tooltip>
                  </span>
                </label>
                <input type="number" id="ltl-height" required>
              </div>
              <div class="input-roww">
                <label for="ltl-weight">Declared value</label>
                <div class="input-container">
                  <span class="currency-symbol">$</span>
                  <input type="number" id="ltl-weight" required style="margin-bottom: 0px;padding-left: 25px;">
                </div>
                <span class="input-hint">If empty, we’ll price at $1.50 per lb</span>
              </div>
            </div>
            <div class="underline-"></div>
            <div><label> Pallet setup 1</label></div>
            <div class="md-label-input">
              <div class="input-roww">
                <label for="ltl-Height">Height per pallet (inches)*</label>
                <input type="number" id="ltl-Height" required>
              </div>
              <div class="input-roww">
                <label for="ltl-Weight">Weight per pallet (lb)*</label>
                <input type="number" id="ltl-Weight" required>
              </div>
              <div class="input-roww">
                <label for="ltl-No">No. of pallets*</label>
                <input type="number" id="ltl-No" required>
              </div>
              <div class="input-roww">
                <label for="ltl-Total" style="color: #999;">Total weight of pallets (lbs)*</label>
                <input type="number" id="ltl-Total" value="0.00" placeholder="0.00" required readonly>
              </div>
              <div class="input-roww">
                <label for="ltl-stackable">Stackable pallets*</label>
                <select id="ltl-stackable" required>
                  <option value="">Select</option>
                  <option value="yes">Yes</option>
                  <option value="no">NO</option>
                </select>
              </div>
            </div>
          </div>
          <div class="master-case-details" v-if="carrier === 'own'">
            <div class="md-strong-span">
              <span><strong>Master case details</strong> </span>
            </div>
            <div class="md-span gray-text">
              <span>Shipment ID:{{ shipmentData.shipmentId }} | Total items: {{ this.totalItems }} | Total units: {{
                this.totalUnits }}</span>
            </div>
            <div class="underline-"></div>
            <div class="md-label-input">
              <div class="input-roww" v-if="selectedPreferred !== 'small-parcel'">
                <label for="pallets">No. of pallets*</label>
                <input type="number" id="pallets" required ref="pallets">
              </div>
              <div class="input-roww">
                <label for="singleSku">No. of single SKU master cases*</label>
                <input type="number" id="singleSku" required ref="singleSku">
              </div>
              <div class="input-roww">
                <label for="mixedSkus">No. of mixed SKU master cases*</label>
                <input type="number" id="mixedSkus" required ref="mixedSkus">
              </div>
            </div>
            <div class="info-banner">
              <div class="info-text">
                <i class="el-icon-shopping-cart-full"></i>
                <div>
                  <strong>Try a Walmart preferred carrier</strong>
                  <p>Get discounted shipping and reliable delivery. Switch the carrier to Walmart preferred carrier to
                    preview
                    rates, or continue with your own carrier.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--Confirm-->
    <div v-if="active === 2" style="background-color:#f9f9f9; border-radius: 8px;height:650px;">
      <div class="content-d">
        <div class="confirm-title">
          <h2>Confirm shipment</h2>
          <p style="font-size:15px">Shipment ID：{{ shipmentData.shipmentId }}</p>
        </div>
        <div class="confirm">
          <div style="margin-top:20px;margin-bottom:20px;" class="confim-m">
            <span style="font-size:18px"><strong>Item details</strong> </span>
          </div>
          <div class="confirm-d confim-m">
            <span>Total items:</span>
            <span style="float:right">{{ this.totalItems }}</span>
          </div>
          <div class="confirm-d confim-m">
            <span>Total units:</span>
            <span style="float:right">{{ this.totalUnits }}</span>
          </div>
          <div class="underline-"></div>
          <div style="margin-top:20px;margin-bottom:20px;" class="confim-m">
            <span style="font-size:18px"><strong>Estimated price</strong> </span>
          </div>
          <div class="confirm-d confim-m">
            <span>Ship to:</span>
            <span style="float:right">{{ this.shipmentData.shipFcName }}, {{ this.shipmentData.shipAddressLine }},
              {{ this.shipmentData.shipCity }}, {{ this.shipmentData.shipStateCode }}, {{
                this.shipmentData.shipPostalCode
              }}</span>
          </div>
          <div class="confirm-d confim-m"><Strong>Carrier</Strong></div>
          <div class="confirm-d confim-m">
            <span>Freight type:</span>
            <span style="float:right">{{ selectedPreferredTitle }}</span>
          </div>
          <div class="confirm-d confim-m">
            <span>Other:</span>
            <span style="float:right">{{ carrierTitle }}</span>
          </div>
          <div class="confirm-d confim-m"><Strong>Price details</Strong></div>
          <div class="confirm-d confim-m" v-if="shipmentLabel.pallets && shipmentLabel.pallets !== ''">
            <span>No. of pallets:</span>
            <span style="float:right">{{ this.shipmentLabel.pallets }}</span>
          </div>
          <div class="confirm-d confim-m">
            <span>No. of single SKU master cases:</span>
            <span style="float:right">{{ this.shipmentLabel.singleSku }}</span>
          </div>
          <div class="confirm-d confim-m">
            <span>No. of mixed SKU master cases:</span>
            <span style="float:right">{{ this.shipmentLabel.mixedSkus }}</span>
          </div>
        </div>
      </div>
    </div>

    <!--Botton-->
    <div class="fixed inset-x-0 bottom-0 bg-white" style="z-index: 999" v-loading="loading">
      <div class="p-20">
        <div class="w_T flex justify-between">
          <!-- Back 按钮放在左侧 -->
          <div style="margin-left:12%">
            <el-button @click="prev" class="el-button_v" v-if="active > 0" size="large">Back</el-button>
          </div>
          <!-- 其他按钮放在右侧 -->
          <div>
            <el-button plain class="el-button_v" size="large" @click="iconClose">Close</el-button>
            <el-button type="primary" class="el-button_v" size="large" plain @click="next" style="margin-left:30px"
              :loading="createBtn">Next</el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 编辑弹窗 -->
    <el-dialog :visible.sync="dialogVisible" width="400px" @close="resetValues"
      :style="{ top: dialogTop + 'px', left: dialogLeft + 'px' }" append-to-body :custom-class="'dialog-custom'">
      <el-form :model="form">
        <el-form-item>
          <span class="dialog-text">You can add up to {{ maxUnits }} more units. The number of units must be at least
            1.</span>
          <el-input-number v-model="form.itemQty" :min="1" placeholder="Enter units" :precision="0"
            controls-position="right"
            style="width: 100%; height: 45px; font-size: 18px; padding: 2px 0px; border-radius: 4px;"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="saveUnits" :loading="loadingBtn">Save</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getShipmentItems,
  updatedShipmentQty,
  createShipmentLabel,
} from "@/api/walmart/shipment";
export default {
  dicts: ["add_to_order"],
  data() {
    return {
      active: 0,
      loading: false,
      shipmentItemList: [],
      shipmentData: [],
      dialogVisible: false,
      form: {
        itemQty: 0,
      },
      maxUnits: 6,
      currentRow: null,
      dialogTop: 0,  // 弹窗的上方位置
      dialogLeft: 0,  // 弹窗的左侧位置
      totalItems: 0,
      loadingBtn: false,
      showEstimate: false,
      carrier: 'preferred',
      containerHeight: '350px',
      selectedPreferred: 'small-parcel',
      expectedDeliveryDate: null,
      // 新增 pickerOptions 配置
      pickerOptions: {
        disabledDate(time) {
          // 禁用今天之前（不含今天）的日期
          const today = new Date();
          today.setHours(0, 0, 0, 0);
          return time.getTime() <= today.getTime();
        }
      },
      shipmentLabel: {
        shipmentId: '',
        labelSize: 'X4_6',
        labelFormat: 'PDF',
        pallet: '',
        singleSku: '',
        mixedSkus: '',
        shopAuthId: ''
      },
      createBtn: false,
    }
  },
  mounted() {
    const itemsData = localStorage.getItem("shipmentData");
    this.shipmentData = JSON.parse(itemsData);
    this.shipmentLabel.shopAuthId = this.shipmentData.authId;
    this.getShipmentItems();
  },
  created() {
  },
  computed: {
    // 计算总的 master cases
    totalMasterCases() {
      return this.shipmentItemList.reduce((sum, item) => {
        return (
          sum +
          Math.ceil(
            parseFloat(item.itemQty) / parseFloat(item.innerPackQty) || 0
          )
        );
      }, 0);
    },
    totalUnits() {
      return this.shipmentItemList.reduce((sum, item) => {
        return (
          sum +
          Math.ceil(
            parseFloat(item.itemQty) || 0
          )
        );
      }, 0);
    },
    selectedPreferredTitle() {
      switch (this.selectedPreferred) {
        case 'small-parcel':
          return 'Small parcel';
        case 'ltl':
          return 'LTL (Less than truckload)';
        case 'ftl':
          return 'FTL (Full truckload)';
        case 'lcl':
          return 'LCL (Less than container load)';
        case 'fcl':
          return 'FCL (Full container load)';
        default:
          return '';  // 如果没有匹配的值，返回空字符串
      }
    },
    carrierTitle() {
      return this.carrier === 'preferred' ? 'Walmart preferred carrier' : "I'll find a carrier or use my vehicles";
    }
  },
  methods: {
    iconClose() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.replace({
        path: "/sale/walmart/walmartWFS/shipments",
      }); // 关闭之后要返回的页面
    },
    iconCloseReflush() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({
        path: "/sale/walmart/walmartWFS/shipments",
        query: { page: 1 }
      }); // 关闭之后要返回的页面
    },
    next() {
      if (this.active === 0) {
        this.active++;
        return;
      }
      if (this.active === 1) {
        if (this.checkShipmentLabel()) {
          this.active++;
        };
        return;
      }
      if (this.active === 2) {
        this.createShipmentLabel();
        return;
      }
    },
    prev() {
      if (this.active > 0) {
        this.active--;  // 如果当前不是图一，则可以返回
      }
    },
    getShipmentItems() {
      getShipmentItems(this.shipmentData).then((response) => {
        this.shipmentItemList = response.data;
        this.totalItems = response.data.length;
      });
    },
    openDialog(row) {
      this.currentRow = row;  // 确保赋值
      this.form.itemQty = row.itemQty;
      this.dialogVisible = true;
      // 计算按钮的位置并设置弹窗的位置
      const button = event.target;  // 获取被点击的按钮
      const rect = button.getBoundingClientRect();

      this.dialogTop = rect.top + rect.height - 50; // 弹窗的顶部位置，按钮的下方 + 10px
      this.dialogLeft = rect.left + (rect.width / 2) - 200; // 弹窗的水平居中位置
    },
    saveUnits() {
      // 确保 currentRow 不为 null
      if (!this.currentRow) return;
      if (this.form.itemQty < 1 || this.form.itemQty > this.maxUnits + this.currentRow.itemQty) {
        this.$message.error("You can add up to " + this.maxUnits + " more units. The number of units must be at least 1");
        return; // 如果输入的数量不符合条件则不保存
      }
      this.loadingBtn = true;
      this.currentRow.itemQty = this.form.itemQty;  // 更新当前行的 itemQty
      const vendorPackQty = Math.ceil(parseFloat(
        this.currentRow.itemQty) / parseFloat(this.currentRow.innerPackQty) || 0)
      this.currentRow.vendorPackQty = vendorPackQty;
      updatedShipmentQty(this.currentRow).then((response) => {
        this.loadingBtn = false;
        this.$modal.msgSuccess("修改数量成功！");
        this.dialogVisible = false;  // 关闭弹窗
      });
    },
    resetValues() {
      this.form.itemQty = 0;
      this.currentRow = null; // 确保弹窗关闭时重置 currentRow
    },
    updateContainerHeight() {
      // Update container height based on selected carrier
      if (this.carrier === 'own') {
        this.containerHeight = '450px'; // Height when "I'll find a carrier or use my vehicles" is selected
      } else {
        this.containerHeight = '350px'; // Height when "Walmart preferred carrier" is selected
      }
    },
    //判断入库标签
    checkShipmentLabel() {

      this.shipmentLabel.pallet = '';
      this.shipmentLabel.singleSku = '';
      this.shipmentLabel.mixedSkus = '';

      const singleSku = this.$refs.singleSku.value;
      const mixedSkus = this.$refs.mixedSkus.value;
      if (this.selectedPreferred !== 'small-parcel') {
        const pallets = this.$refs.pallets.value;
        if (!pallets) {
          this.$message.error("Please fill in the No. of pallets.");
          return false;
        }
        this.shipmentLabel.pallet = pallets;
      }
      if (!singleSku) {
        this.$message.error("Please fill in the No. of single SKU master cases.");
        return false;
      }
      if (!mixedSkus) {
        this.$message.error("Please fill in the No. of mixed SKU master cases.");
        return false;
      }
      this.shipmentLabel.shipmentId = this.shipmentData.shipmentId;
      this.shipmentLabel.singleSku = singleSku;
      this.shipmentLabel.mixedSkus = mixedSkus;
      return true;
    },
    /** 跳转到打印页面 */
    handleInventoryPrint(row) {
      const printData = row;
      // 使用路由跳转到打印页面，并将打印数据传递给路由
      this.$router.push({
        name: 'PrintPage',
        params: { printData: printData }
      });
    },
    //创建入库标签
    createShipmentLabel() {
      this.createBtn = true;
      createShipmentLabel(this.shipmentLabel).then((response) => {
        this.createBtn = false;
        this.$modal.msgSuccess("设置发货成功！");
        setTimeout(() => {
          this.iconCloseReflush();
        }, 500); // 1000毫秒 = 1秒
      });
    }
  }
};
</script>

<style>
.app-container {
  background-color: white;
  font-family: Arial, sans-serif;
}

.el-dialog__body {
  padding: 5px 20px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
}

.larger-icon {
  font-size: 24px;
}

.select-input {
  width: 160px;
}

.input-with-selects {
  width: 950px;
}

.bg-blue-100,
.bg-blue-110 {
  --tw-bg-opacity: 1 !important;
}

.bg-blue-100 {
  background-color: rgba(0, 113, 220, var(--tw-bg-opacity)) !important;
}

.text-white {
  color: #fff !important;
}

.px-24 {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.py-16 {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.justify-between {
  -webkit-box-pack: justify !important;
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
}

.items-center {
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
}

.flex {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

.w-40 {
  width: 40px !important;
}

.justify-start {
  -webkit-box-pack: start !important;
  -ms-flex-pack: start !important;
  justify-content: flex-start !important;
}

.Body-module_weight400__4Oy12 {
  font-weight: 400;
}

.Body-module_body1__B5yP7 {
  font-size: 16px;
  line-height: 24px;
}

.Body-module_body__eiCkB {
  color: #2e2f32;
  font-family: BogleWeb, MyriadPro, Helvetica Neue, Helvetica, Arial, sans-serif;
  margin-bottom: 0;
  margin-top: 0;
}

.w_De {
  font-weight: 700;
}

.w_Da,
.w_Db {
  line-height: 1.5rem;
}

.w_Da {
  font-size: 1.125rem;
}

.w_DY {
  color: #2e2f32;
  font-family: Bogle, Helvetica Neue, Helvetica, Arial, sans-serif;
  margin-bottom: 0;
  margin-top: 0;
}

.steps-container {
  display: flex;
  font-size: 14px;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
}

.w_T {
  display: flex;
  justify-content: space-between;
  /* 确保按钮分布在两边 */
  align-items: center;
}

.p-20 {
  padding: 20px !important;
}

.inset-x-0 {
  right: 0 !important;
  left: 0 !important;
}

.fixed {
  position: fixed !important;
  /* 固定位置 */
  width: 100% !important;
  /* 让它占满整个宽度 */
  bottom: 0 !important;
  /* 保证它固定在底部 */
  left: 0% !important;
  /* 对齐到左边 */
  background-color: white !important;
  /* 设置背景为白色 */
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
  /* 可选：为底部添加阴影，提高可见度 */
}

.bg-white {
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity)) !important;
}

.bg-white,
.bg-yellow-180 {
  --tw-bg-opacity: 1 !important;
}

.justify-end {
  -webkit-box-pack: end !important;
  -ms-flex-pack: end !important;
  justify-content: flex-end !important;
}

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  margin: 0;
  padding: 20px;
}

.shipment-container {
  background-color: white;
  margin: 0 auto;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.shipment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.shipment-id span,
label {
  line-height: 1.6;
  font-size: 16px;
  color: #333;
}

.shipment-id strong {
  font-weight: bold;
  /* 让 Shipment ID: 部分加粗 */
}

.shipment-details {
  display: flex;
  justify-content: space-between;
  /* 在一行排列 */
}

.statistic {
  display: flex;
  flex-direction: column;
  /* 将标签和对应值垂直排列 */
  align-items: center;
  /* 居中 */
  margin-right: 30px;
  /* 添加间距 */
}

.statistic span {
  font-size: 14px;
  color: #525151;
}

.statistic strong {
  font-weight: bold;
  /* 让数字加粗 */
  font-size: 25px;
  /* 设置数字字体稍大 */
}

.total-items,
.no-master-cases {
  font-size: 16px;
  color: #333;
  margin-bottom: 8px;
  /* 为了让每个元素之间有些间隔 */
}

.download-btn {
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.download-btn:hover {
  background-color: #0056b3;
}

.item-table {
  width: 100%;
  border-collapse: collapse;
}

.item-table th,
.item-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.item-table th {
  background-color: #f2f2f2;
}

.item-table tr:hover {
  background-color: #f9f9f9;
}

.item-details-title,
.confirm-title {
  text-align: center;
  /* 使内容居中 */
  padding-top: 20px;
  /* 增加标题上方的内边距 */
  /* 增加标题下方的内边距 */
}

.item-details-title h2,
.confirm-title h2 {
  font-size: 18px;
  /* 增大标题字体 */
  margin: 0;
  /* 去除标题的外边距 */
  font-weight: 800;
  /* 加粗标题 */
}

.item-details-title p,
.confirm-title p {
  font-size: 14px;
  /* 增大段落字体 */
  color: #666;
  /* 设置文字颜色 */
  margin-top: 10px;
  /* 段落与标题之间的间距 */
}

/* 自定义弹窗文本样式 */
.dialog-text {
  font-size: 14px;
  /* 调整字体大小 */
  line-height: 1.5;
  /* 减少行高 */
  margin-bottom: 10px;
  /* 设置底部间距 */
  display: block;
  /* 使文本换行 */
}

.dialog-custom {
  position: absolute !important;
  /* 使用 absolute 定位 */
  z-index: 9999;
  /* 确保弹窗浮在上面 */
}

.el-button_v {
  padding: 12px 24px;
  /* 设置按钮的内边距，增大按钮 */
  border-radius: 12px;
  /* 圆角 */
}

.container {
  display: flex;
  justify-content: space-between;
  overflow-y: auto;
  min-height: calc(100vh - 100px);
  /* 确保内容至少填满屏幕高度 */
}

.left-column,
.right-column {
  border-radius: 8px;
}

.left-column {
  width: 30%;
}

.right-column {
  width: 65%;
}

.left-column,
.right-column {
  flex-grow: 1;
}

.Estimate-price {
  background-color: #f0f0f0;
  border-radius: 8px;
  min-height: 700px;
  /* 确保这个高度足够撑满屏幕 */
  display: flex;
  flex-direction: column;
}

.Estimate-price label {
  display: block;
  margin-top: 10px;
}

.Estimate-price,
select {
  margin-top: 5px;
  padding: 10px;
  width: 100%;
}

.Estimate-price button {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}

.Estimate-price button:hover {
  background-color: #0056b3;
}

.el-tooltip__popper {
  white-space: normal !important;
  /* 允许文本换行 */
  max-width: 400px;
  /* 可选: 设置最大宽度 */
}

.underline- {
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
  margin-top: 10px;
}

/* 1. 使按钮和文字对齐 */
.radio-btn {
  vertical-align: middle;
  /* 使按钮垂直居中 */
}

.radio-label {
  font-size: 15px;
  font-weight: normal;
  /* 初始文字不是粗体 */
  vertical-align: middle;
  /* 使标签与按钮垂直对齐 */
  margin-left: 5px;
  /* 给按钮和文字之间一些间距 */
}

/* 2. 选中后变粗体 */
input[type="radio"]:checked+.radio-label {
  font-weight: 600;
  /* 选中后文字变为粗体 */
}

.divTop {
  margin-top: 10px;
}

.ship-de,
.ship-from,
.ship-to,
.confirm,
.master-case-details {
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  /* 为两个 div 添加阴影 */
  margin-bottom: 20px;
  /* 设置下方间距 */
}

.ship-from {
  margin-bottom: 20px;
  /* Ship from 和 Ship to 之间的间距 */
}

.ship-from p {
  font-size: 15px
}

.ship-to {
  margin-top: 20px;
  /* Ship to 距离上方的间距 */
}

.ship-to,
.ship-from span,
p {
  line-height: 1.0;
  font-size: 16px;
}

.md-strong-span {
  font-size: 20px;
  color: black;
  font-weight: 800;
}

.md-span {
  font-size: 15px;
  line-height: 2.0;
}

.gray-text {
  color: #3f3e3e;
}

.md-label-input {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  /* 添加间距 */
}

.md-label-input .input-row {
  display: flex;
  flex-direction: column;
  width: 15%;
  /* 控制每个表单项的宽度 */
}

.md-label-input .input-roww {
  display: flex;
  flex-direction: column;
  /* 控制每个表单项的宽度 */
}

.md-label-input label {
  display: block;
  margin-top: 10px;
  margin-bottom: 5px;
  font-size: 14px;
}

/* 默认的 input 和 select 样式 */
.md-label-input input,
select {
  border: 1px solid #ccc;
  /* 默认边框颜色 */
  font-size: 14px;
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 4px;
  outline: none;
  /* 移除默认的焦点轮廓 */
}

/* 输入框聚焦时，边框颜色变化 */
.md-label-input input:focus,
.md-label-input select:focus {
  border-color: #007bff !important;
  /* 可选：聚焦时改变边框颜色 */
}

/* 只有在输入框无效时（为空或不符合要求）显示红色边框 */
.md-label-input input:invalid,
.md-label-input select:invalid {
  border-color: red !important;
}

/* 输入框有效时（正确填写）显示绿色边框 */
.md-label-input input:valid,
.md-label-input select:valid {
  border-color: green !important;
}

.w_EN {
  width: 20%;
  background: #fff;
  border-radius: 0.25rem;
  -webkit-box-shadow: inset 0 0 0 0.0625rem #909196;
  box-shadow: inset 0 0 0 0.0625rem #909196;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

.w_ER {
  flex: 1;
  background: transparent;
  border: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #2e2f32;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  font-family: Bogle, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: 400;
  margin: 0;
  min-width: 0;
}

/* 提示文本的样式 */
.input-hint {
  font-size: 12px;
  color: #888;
  /* 浅灰色 */
  margin-top: 5px;
  display: block;
}

.input-container {
  position: relative;
  display: inline-block;
}

.currency-symbol {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  pointer-events: none;
  /* 让美元符号不会影响输入 */
}

.info-banner {
  display: flex;
  background-color: #e1f1fe;
  /* 背景色 */
  padding: 15px;
  border-radius: 5px;
  /* 可选：设置圆角 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* 可选：添加阴影效果 */
  margin: 10px auto;
  /* 可选：居中显示 */
}

.info-text {
  display: flex;
  align-items: center;
  /* 垂直居中图标和文本 */
}

.info-text i {
  font-size: 30px;
  /* 增大图标 */
  margin-right: 15px;
  /* 图标与文本之间的间距 */
}

.info-text strong {
  font-size: 16px;
  display: block;
  margin-bottom: 5px;
  /* 强调文字的下边距 */
}

.info-text p {
  font-size: 14px;
  margin-top: 10px;
  color: #666;
  /* 提示文字的颜色 */
}

.content-d {
  display: flex;
  font-size: 15px;
  flex-direction: column;
  /* 垂直排列子元素 */
  align-items: center;
  /* 水平居中 */
  justify-content: center;
  /* 垂直居中 */
  width: 100%;
  /* 确保父容器宽度为100% */
}

.confirm {
  width: 40%;
  /* 控制confirm的宽度 */
  margin-top: 20px;
  /* 可选：为 confirm 添加顶部间距 */
}

.confim-m {
  padding-right: 10px;
  padding-left: 15px;
}

.confirm-d {
  line-height: 30px;
}
</style>
